<script lang="ts">
/**
 * @author Leo
 * @description #19523 选择产品
 * @event emit('on-done') 保存操作
 */
import {
  Component,
  Vue,
  Prop,
  Watch,
  Mixins,
  Emit
} from "vue-property-decorator";
import { Action, namespace } from "vuex-class";
import { EventBus, PageBar } from "feok-lib";
import TableWithSumMix from "@/views/mixins/TableWithSumMix";

import { getApiAssetsGroup, getApiAssetsFile } from "@/model";

@Component({
  components: {
    PageBar
  }
})
export default class ChoosePhoto extends Mixins(TableWithSumMix) {
  // 当期活动的分组
  public activedGroup = {
    name: "",
    id: 1
  };

  public query = {
    name: "",
    type: "IMAGE"
  };

  public menuArr: any = [];
  public fetchDataAction = this.getApiAssetsFile;

  // 拉取资料列表
  public async getApiAssetsFile(query: any, page: number, limit: number) {
    try {
      const { data = [], total = 0 } = await getApiAssetsFile({
        ...query,
        groupId: this.activedGroup.id,
        pageNo: page,
        pageSize: limit
      });

      return {
        datas: data,
        total
      };
    } catch (err) {
      console.log(err);
    }
  }

  // 切换分类
  // item:分类对象
  public clickMenu(item: any) {
    try {
      this.activedGroup = JSON.parse(JSON.stringify(item));
      this.fetchData();
    } catch (e) {
      console.log(e);
    }
  }

  // 拉取分组列表
  public async fetchGroupList() {
    try {
      this.menuArr = await getApiAssetsGroup({
        type: "IMAGE"
      });
    } catch (e) {
      console.log(e);
    }
  }

  public async refresh() {
    await this.fetchGroupList();
    if (this.menuArr.length) {
      this.activedGroup = this.menuArr[0];
      await this.fetchData();
    }
  }

  public mounted() {
    this.refresh();
  }
}
</script>

<template>
  <div class="photo_list">
    <el-row>
      <el-col :span="3">
        <ul class="photo_list_view-menu">
          <li
            v-for="(item,index) in menuArr"
            :key="index"
            class="photo_list_view-menu_li"
            :class="{'photo_list_view-menu_li-actived':activedGroup.id === item.id}"
            @click="clickMenu(item)"
          >
            <span class="feok-fr">{{item.acount}}</span>
            {{item.name}}
          </li>
        </ul>
      </el-col>
      <el-col :span="21">
        <div class="photo_list-list">
          <div v-for="(item,index) in data" :key="index" class="photo_list-car">
            <div class="photo_list-img_wrap" @click="$emit('on-done', item)">
              <img class="photo_list-img" :src="item.url" :alt="item.name" />
            </div>
            <h5 class="photo_list-img_name">{{item.name}}</h5>
          </div>
        </div>
      </el-col>
    </el-row>
    <div style="margin-top:18px;overflow:hidden;">
      <el-pagination
        class="feok-fr"
        background
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page.sync="page"
        :page-size="limit"
        layout="prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<style lang="less">
.photo_list {
  .photo_list_view-menu_wrap {
    width: 90%;
    margin: 0 auto;
    background: #f3f5f5;
  }
  .photo_list_view-search {
    width: 100%;
    margin: 10px 0;
  }
  .photo_list_view-menu {
    background: #f3f5f5;
    padding: 6px 0;
  }
  .photo_list_view-menu_li {
    color: #7b898f;
    position: relative;
    list-style-type: none;
    line-height: 24px;
    font-size: 14px;
    padding: 0 8px;
    margin: 8px 0;
    cursor: pointer;
    &:hover {
      .photo_list_view-menu_li-actived;
    }
  }
  .photo_list_view-menu_li-actived {
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 4px;
      height: 24px;
      background: #409eff;
    }
    color: #2d8cf0;
    font-weight: bold;
  }
  .photo_list-list {
    overflow: hidden;
  }
  .photo_list-car {
    float: left;
    width: 120px;
    margin: 0 10px 10px 10px;
    .photo_list-img_wrap {
      width: 122px;
      height: 122px;
      position: relative;
      background: #f9f9f9;
      cursor: pointer;
      &:hover {
        border: 3px solid #2d8cf0;
      }
    }
    .photo_list-img {
      display: block;
      max-width: 100%;
      max-height: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .photo_list-img_name {
      line-height: 1.4em;
      padding-top: 10px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}
</style>